<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>底部导航</title>
    <link rel="stylesheet" type="text/css" href="../../css/api1.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style1.css"/>
    <style>
        header{ background-color: #f2f2f2; }
        header ul li { height: 50px; line-height: 50px; text-align: center; display: none; color: #323237; position: relative;font-size: 18px;  }
        header ul li.active{ display: block; }
        #footer{  background-color: #f2f2f2;}
        #footer ul li{  padding-top: 30px; padding-bottom: 8px; background: url() no-repeat center 2px; background-size: 25px 25px; text-align: center; }
        #footer ul li.active{ color: #000; }
        #footer ul li:nth-child(1){ background-image: url(../../icon/message.png); }
        #footer ul li:nth-child(2){ background-image: url(../../icon/approve.png); }
        #footer ul li:nth-child(3){ background-image: url(../../icon/oppose.png); }
        #footer ul li:nth-child(4){ background-image: url(../../icon/collect.png); }
        #footer ul li:nth-child(1).active{ background-image: url(../../icon/message.png); }
        #footer ul li:nth-child(2).active{ background-image: url(../../icon/agreechousen.png); }
        #footer ul li:nth-child(3).active{ background-image: url(../../icon/oppose.png); }
        #footer ul li:nth-child(4).active{ background-image: url(../../icon/collect.png); }
        .flex-con{
          overflow: scroll;
        }
        .fixed_bottom {
           position:fixed;
           left:0px;
           bottom:0px;
           width:100%;
           height:7%;
           z-index:10;
        }
        .fixed_top {
           position:fixed;
           left:0px;
           top:0px;
           width:100%;
           height:7%;
           z-index:10;
        }
        .header-box {
          position: relative;
          width: 100%;
          height: 100%;
          background-color: #ffffff
        }
        header {
          width: 100%;
          height: 100%;
          background-color: #ffffff;
          z-index: 10;

        }
        header .left {
          position: absolute;
          top: 15px;
          width: 21.5px;
          height: 15.5px;
          left: 15px;
          background-image: url(../../icon/back.png);
          background-size: 21.5px 15.5px;
          background-position: center center;
          background-repeat: no-repeat;
        }
        header .right {
          position: absolute;
          top: 15px;
          width: 5px;
          height: 19px;
          right: 15px;
          background-image: url(../../icon/more.png);
          background-size: 5px 19px;
          background-position: center center;
          background-repeat: no-repeat;
        }
				.title {
          /*border: 1px solid red;*/
          position: relative;
          width: 100%;
          height: auto;
          padding-left: 24px;
          padding-top: 15%;
          padding-right: 24px;
          box-sizing: border-box;
          font-size: 20px; color: #000000; text-align: left;
          font-weight: bold;
        }
        .tag {
          /*border-bottom: 1px solid #d3d2d2;*/
          /*border: 1px solid blue;*/
          position: relative;
          width: 100%;
          height: auto;
          padding-left: 24px;
          padding-top: 10px;
          box-sizing: border-box;
          font-size: 12px; color: #917dcf; text-align: left;
        }
        .answer {
          /*border: 1px solid red;*/
          position: relative;
					margin-top: 15%;
          width: 100%;
          height: auto;
          font-size: 15px; color: #000000; text-align:justify;
        }
        .answer .replyer {
          /*border: 1px solid red;*/
          width: 100%;
          height: 36px;
          background-color: #fff;
          padding-top: 0px;
        }
        .replyer .replyer-left {
          width: 36px;
          height: auto;
          float: left;
          padding-left: 24px;
        }
        .replyer-left .replyer-imag {
          width: 36px;
          height: 36px;
        }
        .replyer-imag img {
          width: 36px;
          height: 36px;
          border-radius: 18px;
        }
        .replyer .replyer-right {
          /*border: 1px solid blue;*/
          width: 180px;
          height: auto;
          float: left;
        }
        .replyer-right .replyer-name {
          width: auto;
          height: 16px;
          font-size: 16px; color: #000000; text-align: left;
          padding-left: 8px
        }
        .replyer-right .replyer-note {
          width: auto;
          height: 14px;
          font-size: 12px; color: #8e8e8e; text-align: left;
          padding-top: 10px;
          padding-left: 8px
        }
        .replyer .follow {
          /*border: 1px solid blue;*/
          width: 78px;
          height: 30px;
          float: right;
          margin-right: 24px;
          background-color: #6d7cd9;
          border-radius: 4px;
          font-size: 16px; color: #fff; text-align: center;
          line-height: 30px;
        }

        .answer .content-body {
        	position: relative;
					width: 90%;
          left: 5%;
          padding-top: 10%;
          font-size: 15px; color: #fff; text-align: left;
        }
        .content-imag {
          width: 100%;
          position: relative;
          padding-top: 7%;
					padding-bottom: 20%;
        }
        .content-imag img {
        	position: relative;
          width: 90%;
          height: 20%;
					left: 5%;
          border-radius: 14px;
        }
        #little-window ul li {
          height:50px;
          font-size: 16px; color: #000; text-align: center;
          line-height: 50px;
        }
        .little-window {
          /*border: 1px solid red;*/
          position: fixed;
          right: 24px;
          top: 50px;
          height: 150px;
          width: 113.5px;
          background-color: #fff;
          font-size: 16px;color: #000; text-align: center;
          z-index: 10;
          box-shadow:  darkgrey  1px 1px 1px 1px;
        }


    </style>
</head>
<body id="body">
<div id="wrap" class="flex-wrap flex-vertical">

    <div id="main">
      <div class="fixed_top">
      <header id="header" class="header-box">
        <div class="left" onclick="back()"></div>
        <div class="center"></div>
        <div class="right"tapmode onclick="little_window()"></div>
      </header>
      </div>
      <div id='little-window' class="little-window" style="display:none">
        <ul>
          <li>分享</li>
          <li>举报</li>
          <li>匿名</li>
        </ul>
      </div>
      <div id = "title" class="title" onclick="closelitwindow()">
      </div>
      <div id="tag"  class="tag" onclick="closelitwindow()">
      </div>
    </div>

    <div class="answer" onclick="closelitwindow()">
      <div class="replyer">
        <div class="replyer-left">
          <div class="replyer-imag">
            <img src="../../image/09-014416_603.jpg" alt="">
          </div>
        </div>
        <div class="replyer-right">
          <div class="replyer-name">我是一只大橙子</div>
          <div class="replyer-note">UI问题优秀回答者</div>
        </div>
        <div id="follow_logo" class="follow"tapmode onclick="change_follow()">+关注</div>
      </div>

      <div id='answer_content' class="content-body">
<p></p>
</div>
      <div class="content-imag">
        <img src="../../image/eg_tulip.jpg" alt="">
      </div>
    </div>

    <div id="footer" class="fixed_bottom">
            <span class="iconfont" style="width: 20%;font-size: medium;text-align: center" onclick="open_comment(this)">&#xeb8b;</span>
            <span class="iconfont" style="width: 20%;font-size: medium;text-align: center" onclick="approve(this)"  >&#xec8c;</span>>
            <span class="iconfont" style="width: 20%;font-size: medium;text-align: center" onclick="disapprove(this)">&#xec78;</span>>
            <span class="iconfont"  style="width: 20%;font-size: medium;text-align: center" onclick="collect( this )">&#xecb8;</span>>
    </div>
</div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script type="text/javascript" src="../../script/dropload.min.js"></script>
<script type="text/javascript">

    var qs_id;
    var as_id;
    var us_id;
    var qs_data = {};
    var as_data = {};
    var as_data2 = {};
    var as_dict = {};
    var qs_dict = {};
    var json_data = {};
    var is_liked;
    var is_collected;

    apiready = function () {
        qs_id = api.pageParam.question_id
        as_id = api.pageParam.answer_id
        qs_data = {};
        as_data = {};
        as_data2 = {};
        as_dict = {
            "app_version":"",
            "user_id":"e3b3dc8d20b7052f5c0799f3aa4e9f3e",
            "user_cookie":"fd2066e452fa3d60130e227412e51051",
            "type":"homework",
            "question_id":qs_id,
            "answer_id":as_id,
            "is_like": 2
        };
        console.log("qs_id:"+qs_id)
        console.log("as_id:"+as_id)
        qs_dict = {
            "app_version":"",
            "user_id":"e3b3dc8d20b7052f5c0799f3aa4e9f3e",
            "user_cookie":"fd2066e452fa3d60130e227412e51051",
            "type":"homework",
            "question_id": qs_id
        };
        json_data = {};



        var main = $api.byId('header');
        var title = $api.byId('title');
        var tag = $api.byId('tag');
        var footer = $api.byId('footer');

        var header_H = $api.offset(header).h;
        var tag_H = $api.offset(tag).h;
        var title_H = $api.offset(title).h;
        var footer_H = $api.offset(footer).h;
        var footer_T = $api.offset(footer).t;
        GetAnswer(as_dict);
        GetQuestion(qs_dict);

        question_view();
    }

    function GetQuestion(json) {
        $.ajax({
            type: 'POST',
            // url: "http://1.82.238.228:80/api/questionAnswer/getQuestion/",
            url: "http://1.82.238.228:80/api/questionAnswer/getQuestion/",
            data:JSON.stringify(json),
            // crossDomain: true,
            dataType: 'json',
            async: true,
            success:function(result){
                console.log('问题加载成功')
                qs_data =  result.data
                alert(JSON.stringify(qs_data.tag))
                // view_tips(result)
            },
            error:function(){
                console.log('问题加载失败');
            }
        });
    }




    function GetAnswer(json) {
        $.ajax({
            type: 'POST',
            // url: "http://1.82.238.228:80/api/questionAnswer/getSpecifyAnswer/",
            url: "http://1.82.238.228:80/api/questionAnswer/getSpecifyAnswer/",

            data:JSON.stringify(json),
            // crossDomain: true,
            dataType: 'json',
            async: false,
            success:function(result){
                console.log('回答加载成功')
                as_data =  result.data
                is_liked = as_data.is_liked;
                is_collected = as_data.is_collect
                // view_tips(result)
            },
            error:function(){
                console.log('回答加载失败');
            }
        });
    }

    function question_view() {
        document.getElementById('title').innerHTML = qs_data.title;
        var tag_content = '';
        var tag_num = 0;
        for (var z in qs_data.tag ){
            tag_num = tag_num + 1
        }
        for (var i = 0; i<tag_num; i++) {
            if (i == 0) {
                tag_content = tag_content + qs_data.tag[i];
            }
            else {
                tag_content = tag_content + ' · ' + qs_data.tag[i];
            }
        }
        document.getElementById('tag').innerHTML = tag_content;
        var cont = as_data.content;
        var reg = new RegExp( '------------------------------' , "g" )
        cont = cont.replace(reg,'<br>------------------------------------------------<br>')
        // document.getElementById('answer_content').childNodes[1].innerHTML = as_data.content;
        document.getElementById('answer_content').childNodes[1].innerHTML = cont;
        document.getElementById('footer').childNodes[1].innerText += as_data.comment_num;
        document.getElementById('footer').childNodes[2].innerText+= as_data.like_num;
        document.getElementById('footer').childNodes[3].innerText += as_data.dislike_num;
        document.getElementById('footer').childNodes[4].innerText += as_data.collect_num;

    }

    function approve(tag) {
        as_dict.is_like = 0;

        if($api.hasCls(document.getElementById('footer').childNodes[1].childNodes[5],'active')) { //如果点踩高亮
            $api.removeCls(document.getElementById('footer').childNodes[1].childNodes[5], 'active');
            $api.addCls(document.getElementById('footer').childNodes[1].childNodes[3], 'active');

            document.getElementById('footer').childNodes[2].innerHTML = parseInt(document.getElementById('footer').childNodes[2].innerHTML) + 1 ;
            document.getElementById('footer').childNodes[3].innerHTML = parseInt(document.getElementById('footer').childNodes[3].innerHTML) - 1 ;
            document.getElementById('footer').childNodes[2].disabled = 'true'
            document.getElementById('footer').childNodes[3].disabled = ''


            $.ajax({
                type: 'POST',
                // url: "http://1.82.238.228:80/api/questionAnswer/likeAnswer/",
                url: "http://1.82.238.228:80/api/questionAnswer/likeAnswer/",

                data:JSON.stringify(as_dict),
                // crossDomain: true,
                dataType: 'json',
                async: false,
                success:function(result){
                    console.log('点赞成功')
                    // view_tips(result)
                },
                error:function(){
                    console.log('点赞失败');
                }
            });
        }

        else {
            document.getElementById('footer').childNodes[2].innerHTML = parseInt(document.getElementById('footer').childNodes[2].innerHTML) + 1 ;
            document.getElementById('footer').childNodes[2].disabled = 'true'
            document.getElementById('footer').childNodes[3].disabled = ''
            $api.addCls(tag, 'active');

            $.ajax({
                type: 'POST',
                // url: "http://1.82.238.228:80/api/questionAnswer/likeAnswer/",
                url: "http://1.82.238.228:80/api/questionAnswer/likeAnswer/",

                data:JSON.stringify(as_dict),
                // crossDomain: true,
                dataType: 'json',
                async: false,
                success:function(result){
                    console.log('点赞成功')
                    // view_tips(result)
                },
                error:function(){
                    console.log('点赞失败');
                }
            });
        };
    }

    function disapprove(tag) {
        as_dict.is_like = 1;
        if( $api.hasCls(document.getElementById('footer').childNodes[1].childNodes[3],'active') ) { //如果点赞高亮
            $api.removeCls(document.getElementById('footer').childNodes[1].childNodes[3], 'active');
            $api.addCls(document.getElementById('footer').childNodes[1].childNodes[5], 'active');

            document.getElementById('footer').childNodes[1].childNodes[5].innerHTML = parseInt(document.getElementById('footer').childNodes[1].childNodes[5].innerHTML) + 1 ;
            document.getElementById('footer').childNodes[1].childNodes[3].innerHTML = parseInt(document.getElementById('footer').childNodes[1].childNodes[3].innerHTML) - 1 ;
            document.getElementById('footer').childNodes[1].childNodes[5].disabled = 'true'
            document.getElementById('footer').childNodes[1].childNodes[3].disabled = ''
            $.ajax({
                type: 'POST',
                // url: "http://1.82.238.228:80/api/questionAnswer/dislikeAnswer/",
                url: "http://1.82.238.228:80/api/questionAnswer/likeAnswer/",

                data:JSON.stringify(as_dict),
                // crossDomain: true,
                dataType: 'json',
                async: false,
                success:function(result){
                    console.log('点踩成功')
                    // view_tips(result)
                },
                error:function(){
                    console.log('点踩失败');
                }
            });
        }
        else {
            $api.addCls(tag, 'active');
            document.getElementById('footer').childNodes[1].childNodes[5].innerHTML = parseInt(document.getElementById('footer').childNodes[1].childNodes[5].innerHTML) + 1 ;
            document.getElementById('footer').childNodes[1].childNodes[3].disabled = ''
            document.getElementById('footer').childNodes[1].childNodes[5].disabled = 'true'

            $.ajax({
                type: 'POST',
                // url: "http://1.82.238.228:80/api/questionAnswer/dislikeAnswer/",
                url: "http://1.82.238.228:80/api/questionAnswer/likeAnswer/",

                data:JSON.stringify(as_dict),
                // crossDomain: true,
                dataType: 'json',
                async: false,
                success:function(result){
                    console.log('点踩成功')
                    // view_tips(result)
                },
                error:function(){
                    console.log('点踩失败');
                }
            });
        };
    }

    function collect(tag) {
        if( $api.hasCls(tag,'active') ) {  //已收藏
            $.ajax({
                type: 'POST',
                // url: "http://1.82.238.228:80/api/questionAnswer/dislikeAnswer/",
                url: "http://1.82.238.228:80/api/questionAnswer/collectAnswer/",
                data:JSON.stringify(as_dict),
                // crossDomain: true,
                dataType: 'json',
                async: false,
                success:function(result){
                    console.log('取消收藏成功')
                },
                error:function(){
                    console.log('取消收藏失败');
                }
            });

         }
        else {
            $.ajax({
                type: 'POST',
                // url: "http://1.82.238.228:80/api/questionAnswer/dislikeAnswer/",
                url: "http://1.82.238.228:80/api/questionAnswer/collectAnswer/",

                data:JSON.stringify(as_dict),
                // crossDomain: true,
                dataType: 'json',
                async: false,
                success:function(result){
                    console.log('收藏成功')
                },
                error:function(){
                    console.log('收藏失败');
                }
            });
         };

    }


    function open_comment(tag) {
        api.openFrame({
            name: 'comment',
            url: './comment_box.html',
            rect: {
                x:0,
                y:0,
                w:api.winWidth,
                h:api.winHeight
            },
            pageParam: {
                question_id: qs_id,
                answer_id: as_id,
                user_id: 'e3b3dc8d20b7052f5c0799f3aa4e9f3e',
                type:"question"
            },
            animation: {
                type: 'movein',
                subType: "from_bottom",
                duration: 300
            },
            bgColor: 'rgba(0,0,0,0.6)',
            // bounces: false,
        });
    }

    function change_follow() {
        var flag;
        if (document.getElementById('follow_logo').innerHTML == '+关注') {
            flag = 1; //表示关注动作
            document.getElementById('follow_logo').innerHTML = '取消关注';
        }
        else {
            flag = 0; //表示取消关注动作
            document.getElementById('follow_logo').innerHTML = '+关注';
        }

    }

    var litwindow = $api.dom('#little-window');

    function little_window() {
        if (litwindow.style.display == "none") {
            litwindow.style.display = '';
        }
        else {
            litwindow.style.display = 'none';
        }
    }
    function closelitwindow() {
        litwindow.style.display = 'none';
    }

    function back() {
        jsFun = 'location.reload();';
        api.execScript({
            name:'answer_list',
            script:jsFun
        });
        api.historyBack({
        }, function(ret, err) {
            if (!ret.status) {
                api.closeWin();
            }
        });
    }

</script>
